<template>
	<view class="main">
		<view class="top">
			<view class="top-title">
				<view class="top-title-month">
					<i class="iconfont iconjiantou mirror"></i>
					<view class="top-title-month-name">2019年</view>
					<i class="iconfont iconjiantou"></i>
				</view>
				<view class="top-title-month">
					<i class="iconfont iconjiantou mirror"></i>
					<view class="top-title-month-name">{{month}}月</view>
					<i class="iconfont iconjiantou"></i>
				</view>
			</view>
			<view class="top-week">
				<view class="top-week-day">
					<view>日</view><view @click="chooseDay=2" class="date" :class="{'active': chooseDay==2}">2</view>
				</view>
				<view class="top-week-day">
					<view>一</view><view  @click="chooseDay=3" class="date" :class="{'active': chooseDay==3}">3</view>
				</view>
				<view class="top-week-day">
					<view>二</view><view  @click="chooseDay=4" class="date" :class="{'active': chooseDay==4}">4</view>
				</view>
				<view class="top-week-day">
					<view>三</view><view  @click="chooseDay=5" class="date" :class="{'active': chooseDay==5}">5</view>
				</view>
				<view class="top-week-day">
					<view>四</view><view  @click="chooseDay=6" class="date" :class="{'active': chooseDay==6}">6</view>
				</view>
				<view class="top-week-day">
					<view>五</view><view  @click="chooseDay=7" class="date" :class="{'active': chooseDay==7}">7</view>
				</view>
				<view class="top-week-day">
					<view>六</view><view  @click="chooseDay=8" class="date" :class="{'active': chooseDay==8}">8</view>
				</view>
			</view>
		</view>
		<view class="tab-wrap">
			<view>
				<view class="title"><text>选择时间</text></view>
				<scroll-view scroll-x="true" class="scroll-wrap">
					<view class="item">
						<view  @click="chooseDuration=1" :class="{'active': chooseDuration==1}" class="time-schedule">16:00-17:00</view>
					</view>
					<view class="item">
						<view  @click="chooseDuration=2" :class="{'active': chooseDuration==2}" class="time-schedule">17:00-18:00</view>
					</view>
					<view class="item">
						<view  @click="chooseDuration=3" :class="{'active': chooseDuration==3}" class="time-schedule">17:00-18:00</view>
					</view>
					<view class="item">
						<view  @click="chooseDuration=4" :class="{'active': chooseDuration==4}" class="time-schedule">17:00-18:00</view>
					</view>
				</scroll-view>
			</view>
			<view>
				<view class="title"><text>授课老师</text></view>
				<view class="colum-wrap">
					<view class="item-column">
						<v-lesson-teacher></v-lesson-teacher>
					</view>
					<view class="item-column">
						<v-lesson-teacher></v-lesson-teacher>
					</view>
					<view class="item-column">
						<v-lesson-teacher></v-lesson-teacher>
					</view>
				</view>
			</view>
		</view>
		<v-bar-tab @gotItem="navTo('lesson-ucar')" @addItem="add"></v-bar-tab>
		<!-- <v-preset-bar-tab></v-preset-bar-tab> -->
	</view>
</template>

<script>
	import anchor from './components/anchor'
	import bartab from './components/bartab.vue'
	import barpreset from './components/detail-preset-bar.vue'
	/* 4个选项卡组件 */
	import lessonTeacher from './components/lesson-teacher'
	
	export default {
		data() {
			return {
				month: 5,
				chooseDay: -1,
				chooseDuration: -1,
				todayList: [
					{name: '2019语文中考必备复习方法',len:6,now:1,date:'5月7日',time:'15:00-17:00'},
					{name: '2019语文中考必备复习方法2019语文中考必备复习方法',len:6,now:1,date:'5月7日',time:'15:00-17:00'}
				],
				resource:{
					type: 2,
					src: ''
				},
				lesson: {
					l_title: "2019语文中考必备复习方法",
					l_date: '4.12-5.20丨每周四丨15:00-17:00丨6节课',
					l_cprice: '免费',
					l_preprice: '￥1280',
					l_entered: '1204',
					l_remain: '15'
				},
				service:{
					service_title: '服务项目',
					service_list: [
						{s_id: 12, s_name: '直播授课'}, {s_id: 13, s_name: '课程回放'}, {s_id: 14, s_name: '随时退款'}, {s_id: 15, s_name: '短信提醒'}
						]
				},
				teachers: [
					{
						t_id: '4567',
						t_avatar: '/static/image/lesson-teacher-avatar.png',
						t_name: '王晓鹏',
						t_tags: '北大硕士 高级教师',
						t_seria: '教师资格证编号：1133145661223311'
					},
					{
						t_id: '4568',
						t_avatar: '/static/image/lesson-teacher-avatar1.png',
						t_name: 'Anna Pet',
						t_tags: '哈佛毕业 高级教师',
						t_seria: '教师资格证编号：1133145661224411'
					}
				],
				tabs: {
					items: {'Lesson': '课程', 'Outline': '大纲', 'Discuss': '评价', 'Introduce': '须知'},
					currentTab: 'Lesson'
				}
			}
		},
		components: {
			vBarTab: bartab,
			vLessonTeacher: lessonTeacher,
			vPresetBarTab: barpreset
		},
		onNavigationBarButtonTap(e){
			var _vm = this;
			this.date = +new Date()
			// // #ifdef APP-PLUS  | MP
			// var webView = this.$mp.page.$getAppWebview();
			// webView.setTitleNViewButtonStyle(0, {
			// 	text: _vm.deleting ? '完成' : '编辑',
			// });
			// // #endif  
		},
		onLoad(e) {
			var _vm = this;
			console.log(e.lid)
			uni.showLoading({
				mask: true,
				title: "加载中"
			})
			// load detail from mock
			// mock.post('/lesson/detail', {lessonId: e.lid}, 1500).then(res=>{
			// 	uni.hideLoading();
			// 	if (res.code == '200'){
			// 		var _data = res.data;
			// 		for(var k in _data){
			// 			_vm[k] && (_vm.$set(_vm, k, _data[k]))
			// 		}
			// 	}else{
			// 		uni.showToast({ mask:true, title:res.msg, duration: 1500, complete() {setTimeout(uni.navigateBack, 1000)}})
			// 	}
			// })
		},
		computed: {
			
		},
		methods: {
			navTo (url){
				uni.navigateTo({url: url})
			},
			add () {
				console.log('add item')
			}
		}
	}
</script>

<style scoped>
	page{background: #f7f7f7;}
	.iconfont {font-family: iconfont;}
	.mirror {transform: rotateY(180deg); transition: all none;}
	
	.main{font-family: Source Han Sans CN;padding-bottom: 110upx;}
	.top{width:100%;height:220upx;background:#00d5a2;}
	.top .top-title{display:flex;justify-content:space-around;align-items:center;color:#fff}
	.top .top-title .top-title-month{display:flex;justify-content:space-around;align-items:center}
	.top .top-title .top-title-month i{font-size:28upx}
	
	.top .top-title .top-title-month .top-title-month-name{margin:0 30upx;font-size: 34upx;font-family:Source Han Sans CN;font-weight:500;color: #fff;}
	.top .top-title .top-title-today{font-size:30upx}
	.top .top-week{display:flex;justify-content:space-between;align-items:center;color:#fff;margin: 20upx 40upx;}
	.top .top-week .top-week-day{display:flex;flex-direction:column;align-items:center}
	.top .top-week .top-week-day view:first-child{font-size:26upx;font-weight:400;opacity: 0.8;}
	.top .top-week .top-week-day .date{width: 50upx; height: 50upx;text-align: center;line-height: 50upx;}
	.top .top-week .top-week-day .active{width: 50upx; height: 50upx;background: #FFFFFF; color: #00D5A2;border-radius: 50%;}
/* 	.top .top-week .top-week-day .bottom-dot-box{display: inline-flex;text-align: center;}
	.top .top-week .top-week-day .bottom-dot-box .dot{width: 10upx; height: 10upx; position: relative;background: #fff;border-radius: 50%;} */
	
	.summary{display:flex; flex-direction: column;}
	.summary .title{font-size:34upx; font-weight:bold; color:#333;}
	.summary .date{font-size:24upx; color:#999;font-weight: 400;}
	
	
	.promote{display:flex; margin-top:-10upx;}
	.promote .discount{display:flex; align-items: center;align-items: flex-end}
	.discount .now{height:56upx; font-size:36upx; color:#FF9900;}
	.discount .before{margin:10upx 0 0 20upx; font-size:26upx; color:#999; text-decoration: line-through;}
	.discount .before span{vertical-align: sub;}
	
	.promote .statistic{flex:1; text-align: right; color:#666;}
	.statistic .enrolled{font-size:24upx; color:#666;}
	.statistic .quota {font-size:24upx;}
	.statistic .msg{width:112upx; line-height:40upx; background:#FFB800; color:#fff; border:2upx solid #FFB800; border-radius:8upx 0 0 8upx; display:inline-block; text-align: center;}
	.statistic .num{width: 72upx; line-height:40upx; color:#FF9900; border:2upx solid #FFB800; border-radius:0 8upx 8upx 0; display:inline-block; text-align: center;}
	
	.info-wrap{padding:0 30upx;}
	.info-wrap .info{padding:40upx 0 30upx; border-bottom: 2upx solid #E5E5E5;}
	.info-wrap .service{padding: 6upx 0;display:flex; font-size:26upx;}
	.title{color:#999;}
	
	
	.tab-wrap{border-top:10upx solid #FAFAFA;margin: 0 30upx;}
	
	.tab-wrap .title{margin:20upx 0;}
	.tab-wrap .title text{padding-left:16upx; font-size:34upx; font-weight:bold; color:#333; letter-spacing: 2upx; vertical-align: middle;}
	
	.tab-wrap .scroll-wrap{white-space:nowrap; width:100%;}
	.tab-wrap .scroll-wrap .item{display:inline-block; margin-right:8upx; border-radius:20upx; background:#fff;}
	.tab-wrap .scroll-wrap .item .time-schedule{height: 100upx; width: 340upx; background: #FFF;font-weight:400;font-size: 32upx;color: #666;border-radius: 12upx;display: flex;justify-content: center;align-items: center;}
	.tab-wrap .scroll-wrap .item .active{background: #00d5a2;color: #FFF;}
	.tab-wrap .item-column{margin-bottom: 20upx;}
</style>
